<template>
	<view class="android-box">
		<view class="topBox">
			{{$t('tiktok')}}
		</view>
		<view class="box-operate">
			<view class="box-image">
				<image mode="aspectFit" src="@/static/img/logo-TikTok.png"></image>
			</view>
			<view class="box-info">
				<view>{{$t('tiktok')}}</view>
				<view>{{$t('android')}}</view>
				<view>{{$t('ltd')}}</view>
				<view>
					<view @click="Download()">{{$t('install')}}</view>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="box-center">
			<view>
				<view>{{$t('average_score')}}</view>
				<view>{{$t('score')}}</view>
				<view>
					<image mode='widthFix' src="@/static/img/xx.png"></image>
				</view>
			</view>
			<view>
				<view>{{$t('total_rating')}}</view>
				<view>{{$t('total_rating_num')}}</view>
				<view>{{$t('number')}}</view>
			</view>
			<view>
				<view>{{$t('total_download')}}</view>
				<view>{{$t('total_download_num')}}</view>
				<view>{{$t('frequency')}}</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="box-ban">
			<view class="title-box">{{$t('preview')}}</view>
			<view class="box-scroll">
				<view v-for="(it,index) in 5" :key="index">
					<image mode="scaleToFill" :src="'/static/img/'+it+'.png'"></image>
				</view>
			</view>
		</view>
		<view class="info-box">
			<view>
				<view>
					<text>{{$t('version')}}:</text>{{$t('version_num')}}
				</view>
				<view style="margin-left: 24rpx;">
					<text>{{$t('updata_time')}}:</text>{{$t('updata_time_num')}}
				</view>
			</view>
			<view class="blue-box">{{$t('privacy_policy')}}</view>

		</view>
		<view class="info-box">
			<view>
				<text>{{$t('copyright')}}：</text>{{$t('tiktok_2020')}}
			</view>
			<view class="blue-box">{{$t('authority')}}</view>
		</view>
		<view style="height: 20rpx;"></view>
		<view class="line"></view>
		<view class="box-produce">
			{{$t('produce')}}
			<view>{{$t('more')}}</view>
		</view>
		<view class="line"></view>
		<view class="box-grade">
			<view class="title-box">
				{{$t('ratings_and_reviews')}}
				<text>{{$t('see_all')}}</text>
			</view>
			<view>
				<view class="grade-left">
					<view>{{$t('grade')}}</view>
					<view>{{$t('out_of_5')}}</view>
				</view>
				<view class="grade-right">
					<view class="box-group-items">

						<view class="box-group">
							<view>
								<view>{{$t('star_5')}}</view>
								<view class="bar">
									<view style="width:300rpx ;"></view>
								</view>
							</view>
						</view>
						<view class="box-group">
							<view>
								<view>{{$t('star_4')}}</view>
								<view class="bar">
									<view style="width:10rpx;"></view>
								</view>
							</view>
						</view>
						<view class="box-group">
							<view>
								<view>{{$t('star_3')}}</view>
								<view class="bar">
									<view style="width:10rpx;"></view>
								</view>
							</view>
						</view>
						<view class="box-group">
							<view>
								<view>{{$t('star_2')}}</view>
								<view class="bar">
									<view style="width:10rpx;"></view>
								</view>
							</view>
						</view>
						<view class="box-group">
							<view>
								<view>{{$t('star_1')}}</view>
								<view class="bar">
									<view style="width:10rpx;"></view>
								</view>
							</view>
						</view>
					</view>
					<view class="bot">{{$t('ratings')}}</view>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="box-comment">
			<view class="c1">{{$t('star_5')}}</view>
			<view class="c2">{{$t('comment_time')}}</view>
			<view class="c3">{{$t('what_think')}}</view>
			<view class="c4">
				{{$t('comment_inner')}}
			</view>
			<view class="c5">{{$t('more')}}</view>
		</view>
		<view class="line"></view>

		<view class="box-information">
			<view class="title-box">
				{{$t('more_developer')}}
			</view>
			<view class="box-over-tiktok">
				<image class="TikTokShopSellerCenter" mode="widthFix" src="../static/img/TikTokShopSellerCenter.png">
				</image>
				<view>
					<view>{{$t('tiktok_shop_center')}}</view>
					<view>{{$t('shopping')}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "IOS",
		data() {
			return {

			};
		},

		methods: {
			Download() {
				this.$emit('download')
			}
		}
	}
</script>

<style lang="scss">
	@import '@/pages/index/Android.scss';

	.title-box {
		width: 690rpx;
		margin: 12rpx auto 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;	font-family: 'Medium';
	font-weight: 500;
		font-size: 36rpx;
		color: #000000;
	}

	.blue-box {
		color: #007AFF !important;
	}
</style>